<template>
    <div class="dialog-tpl">
        <div class="dialog-opt"></div>
        <div class="dialog-content animated zoomIn" v-show="dialogshow">
            <div class="dialog-title">添加好友<span @click="hidedialog" class="iconfont icon-guanbi"></span></div>
            <user-item :item="item" :sendshow="false"></user-item>
            <div class="desc">
                <span>描述:</span>
                <div class="desc-input"><input type="text" v-model="desc" placeholder="填写信息更容易验证通过"></div>
            </div>
            <button type="button" class="sendbtn" @click="sendmsg"><cube-loading v-show="loading"></cube-loading>发送</button>
        </div>
    </div>
</template>

<script>
import userItem from '@/components/friends/item.vue'
import { setTimeout } from 'timers';
export default {
    props:{
        item:Object
    },
    data(){
        return{
            desc:'',
            dialogshow:false,
            loading:false
        }
    },
    mounted(){
        setTimeout( ()=>{
            this.dialogshow = true
        },10)
    },
    components:{
        userItem
    },
    methods:{
        sendmsg(){
            this.loading = true
            this.$http.get(`/Message/applyFriend`,{
                account:this.item.account,
                applyContent:this.desc
            }).then( res => {
                console.log(res)
                this.loading = false
                if(res.code == 200){
                    this.$createToast({
                        time: 2000,
                        txt: res.msg,
                        type:'correct'
                    }).show()
                    setTimeout( () => {
                        this.hidedialog()
                    },2000)
                    this.$emit('sendtext','请求已发送')
                }else{
                    this.$createToast({
                        time: 2000,
                        txt: res.msg,
                        type:'error'
                    }).show()
                }
            })
        },
        hidedialog(){
            this.$emit('hidedialog')
        }
    }
}
</script>


<style lang="stylus">
.dialog-tpl{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index 10
    display flex
    align-items center
    justify-content center
    .dialog-opt{
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        background rgba(0,0,0,0.6)
    }
    .dialog-content{
        background #fff
        position relative
        z-index 1
        padding 0 10px 10px
        border-radius 5px
        width 80%
        .dialog-title{
            font-size 16px
            text-align center
            font-weight 600
            border-bottom 1px solid #eeeeee
            margin-bottom 10px
            line-height 50px
            .iconfont{
                position absolute
                top 0
                right 0px
                width 40px
                font-size 14px
            }
        }
        .desc{
            span{
                font-size 14px
            }
            .desc-input{
                border 1px solid #eee
                padding 5px
                border-radius 5px
                margin-top 10px
                input{
                    font-size 14px
                    width 100%
                    height 25px
                    line-height 25px
                }
            }
        }
        .sendbtn{
            background-image: linear-gradient(to bottom, #0392b7, #3563db)
            color #ffffff
            width 90%
            margin 0 auto
            height 40px
            border 0
            outline none 
            border-radius 5px
            margin-top 10px
            display flex
            align-items center
            justify-content center
            font-size 16px
            .cube-loading{
                margin-right 10px
            }
        }
    }
    @-webkit-keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

        50% {
            opacity: 1
        }
    }

    @keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

        50% {
            opacity: 1
        }
    }

    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn
    }
    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
}
</style>
